<template>
  <div>
    <!--  队伍标志大图  -->
    <div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content-banner bg-img">
            <div class="team-bg-content">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content-banner-img bg-purple">
                    <div class="team-bg-content-img-box">
                      <img class="team-bg-content-img" src="../assets/img/teamMark.png" alt="">
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content-banner-text bg-purple-light">
                    <div class="team-bg-content-text-box">
                      <h1>战队总览 </h1>
                      <h3>这里是战队总览</h3>
                      <br>
                      <span style="color: white">战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--  战队总览以及操作  -->
    <div>
      <h2 class="title">战队总览</h2>
      <br>
      <hr>
      <br>
      <!--  表格展示删改查    -->
      <el-table
        :data="tableData"
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 92%; margin: 0 auto;">
        <el-table-column
          prop="teamIcon"
          label="图标">
        </el-table-column>
        <el-table-column
          prop="teamId"
          label="Id">
        </el-table-column>
        <el-table-column
          prop="teamInfo"
          label="队伍介绍">
        </el-table-column>
        <el-table-column
          prop="teamName"
          label="队伍名称">
        </el-table-column>
        <el-table-column
          prop="teamSupport"
          label="队伍支持数">
        </el-table-column>

        <el-table-column label="查看信息">
          <template slot-scope="scope">
            <el-button
              round
              type="primary"
              size="mini"
              icon="el-icon-s-operation"
              @click="handleEdit(scope.$index, scope.row)">队伍详细信息
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="修改队伍信息" v-if="flag">
          <template slot-scope="scope">
            <el-button
              round
              @click="func2(scope.$index, scope.row)"
              icon="el-icon-edit"
              type="success"
              size="mini">
              更新队伍信息
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="删除队伍" v-if="flag">
          <template slot-scope="scope">
            <el-button
              round
              @click="func3(scope.$index, scope.row)"
              icon="el-icon-delete"
              type="danger"
              size="mini">
              删除队伍
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="点赞">
          <template slot-scope="scope">
            <el-button
              round
              @click="good(scope.$index, scope.row)"
              icon="el-icon-star-off"
              type="info"
              size="mini">
              点赞
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   添加队伍   -->
      <div id="team-add" v-if="flag">
        <el-button
          round
          @click="func4()"
          icon="el-icon-plus"
          type="warning">
          增加队伍
        </el-button>
      </div>
      <!--  drawer  -->
      <div>
        <!--   更新   -->
        <el-drawer
          title="我是标题"
          :visible.sync="drawer2"
          :with-header="false">
          <div>
            <div style="margin: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
              <el-form-item label="teamName">
                <el-input v-model="formLabelAlign.teamName"></el-input>
              </el-form-item>
              <el-form-item label="teamIcon">
                <el-input v-model="formLabelAlign.teamIcon"></el-input>
              </el-form-item>
              <el-form-item label="teamSupport">
                <el-input v-model.number="formLabelAlign.teamSupport"></el-input>
              </el-form-item>
              <el-form-item label="teamInfo">
                <el-input v-model="formLabelAlign.teamInfo"></el-input>
              </el-form-item>
            </el-form>
            <button @click="handleEditUpdate()">确认更新</button>
          </div>
        </el-drawer>
        <!--   删除   -->
        <el-drawer
          title="我是标题"
          :visible.sync="drawer3"
          :with-header="false">
          <div>
            <div style="margin: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
              <el-form-item label="teamId">
                <el-input v-model.number="formLabelAlign.teamId"></el-input>
              </el-form-item>
            </el-form>
            <button @click="func3()">确认删除</button>
          </div>
        </el-drawer>
        <!--    增加队伍    -->
        <el-drawer
          title="我是标题"
          :visible.sync="drawer4"
          :with-header="false">
          <div>
            <div style="margin: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
              <el-form-item label="teamName">
                <el-input v-model="formLabelAlign.teamName"></el-input>
              </el-form-item>
              <el-form-item label="teamIcon">
                <el-input v-model="formLabelAlign.teamIcon"></el-input>
              </el-form-item>
              <el-form-item label="teamSupport">
                <el-input v-model.number="formLabelAlign.teamSupport"></el-input>
              </el-form-item>
              <el-form-item label="teamInfo">
                <el-input v-model="formLabelAlign.teamInfo"></el-input>
              </el-form-item>
            </el-form>
            <button @click="handleAdd()">确认添加</button>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import {request} from "../network/request";
import axios from "axios";

export default {
  name: "TeamAll",
  data() {
    return {
      flag: false,
      tableData: [],
      drawer2: false,
      drawer3: false,
      drawer4: false,
      labelPosition: 'right',
      formLabelAlign: {
        teamId: 0,
        teamName: "",
        teamIcon: "",
        teamSupport: 0,
        teamInfo: ""
      },
    }
  },
  methods: {
    handleEdit(index, row) {
      this.$router.push('/team/' + row.teamId);
    },
    handleEditUpdate(index, row) {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/team/update', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    handleEditDel() {
      const arr = [
        this.formLabelAlign.teamId
      ]
      console.log(arr);
      axios.post('http://localhost:8081/teams/team/delete', arr)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    handleAdd() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/team/save', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    func2(index, row) {
      this.drawer2 = true
      this.formLabelAlign.teamId = row.teamId
      this.formLabelAlign.teamIcon = row.teamIcon
      this.formLabelAlign.teamInfo = row.teamInfo
      this.formLabelAlign.teamName = row.teamName
      this.formLabelAlign.teamSupport = row.teamSupport
    },
    func3(index, row) {
      this.formLabelAlign.teamId = row.teamId
      this.handleEditDel()
    },
    func4() {
      this.drawer4 = true
    },
    JudgePower() {
      if (this.$store.state.userPower == 0) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    good(index, row) {
      request({
        url: "/team/good/" + row.teamId,
      }).then(res => {
        location.reload()
      }).catch(err => {
        console.log(err)
      })
    }
  },
  created() {
    this.JudgePower()
    request({
      url: "/team/list",
    }).then(res => {
      // console.log(res.page.list);
      this.tableData = res.page.list
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.grid-content-banner {
  border-radius: 4px;
  height: 521px;
}

.grid-content-banner-img {
  width: 100%;
  height: 521px;
  margin: 0 auto;
}

.team-bg-content-img-box {
  width: 70%;
  height: 70%;
  padding: 12%;
  margin: 0 auto;
}

.team-bg-content-img {
  width: 100%;
  height: 100%;
}

.bg-img {
  background-image: url("../assets/img/team_banner-bg.jpg");
}

.team-bg-content {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  color: white;
}

.team-bg-content-text-box {
  width: 80%;
  height: 70%;
  margin: 22% auto;
}

.bg-purple {
  background-color: #d3dce6;
}

.title {
  margin-top: 3%;
  margin-left: 2%;
}

#team-add {
  float: right;
  margin-top: 1%;
  margin-right: 4%;
}

.asd {
  display: none;
}
.el-input {
  width: 60%;
  margin-left: 20%;
}
</style>
